<template>
    <div>
        <el-button
            size="small"
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="editShow()"
        >{{$t('m.button.newSupplier')}}</el-button>
        <el-table
            ref="table"
            :data="tableData"
            :header-cell-style="getRowClass"
            border
            v-loading="loading"
        >
            <el-table-column prop="productSupplierName" :label="$t('m.label.supplier')"></el-table-column>
            <el-table-column prop="productSupplierAddress" :label="$t('m.label.address')"></el-table-column>
            <el-table-column prop="productSupplierContact" :label="$t('m.label.Contact')"></el-table-column>
            <el-table-column
                prop="productSupplierContactPhone"
                :label="$t('m.label.contactNumber')"
            ></el-table-column>
            <el-table-column prop="productSupplierContactMail" :label="$t('m.label.contactEmail')"></el-table-column>
            <el-table-column
                prop="productSupplierProductionCosts"
                :label="$t('m.label.purchaseCost')"
            ></el-table-column>
            <el-table-column prop="productSupplierMoq" :label="$t('m.label.MOQ')"></el-table-column>
            <el-table-column
                prop="productSupplierCapactity"
                :label="$t('m.label.productionCapacity')"
            ></el-table-column>
            <el-table-column
                prop="productSupplierMinimumCartonQuantity"
                :label="$t('m.label.minimumPackage')"
            ></el-table-column>
            <el-table-column
                prop="productSupplierTransactionCurrency"
                :label="$t('m.label.transactionCurrency')"
            ></el-table-column>
            <el-table-column prop="userName" :label="$t('m.label.purchasingPersonInCharge')"></el-table-column>
            <el-table-column prop="productSupplierRecordUser" :label="$t('m.label.recorder')"></el-table-column>
            <el-table-column prop="uTime" :label="$t('m.label.updateTime')">
                <template slot-scope="scope">{{scope.row.uTime | formatDate}}</template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('m.label.remarks')"></el-table-column>
            <el-table-column :label="$t('m.label.operating')" width="80">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editShow(scope.row)">{{$t('m.button.edit')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <scrollTable ref="scrollTable"></scrollTable>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="350px">
            <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
                <el-form-item prop="productSupplierName" :label="$t('m.label.supplier')+':'">
                    <el-input v-model="formData.productSupplierName" size="mini"></el-input>
                </el-form-item>
                <el-form-item prop="productSupplierContact" :label="$t('m.label.Contact')+':'">
                    <el-input v-model="formData.productSupplierContact" size="mini"></el-input>
                </el-form-item>
                <el-form-item
                    prop="productSupplierContactPhone"
                    :label="$t('m.label.contactNumber')+':'"
                >
                    <el-input v-model="formData.productSupplierContactPhone" size="mini"></el-input>
                </el-form-item>
                <el-form-item
                    prop="productSupplierContactMail"
                    :label="$t('m.label.contactEmail')+':'"
                >
                    <el-input v-model="formData.productSupplierContactMail" size="mini"></el-input>
                </el-form-item>
                <el-form-item prop="productSupplierAddress" :label="$t('m.label.address')+':'">
                    <el-input v-model="formData.productSupplierAddress" size="mini"></el-input>
                </el-form-item>
                <el-form-item
                    prop="productSupplierProductionCosts"
                    :label="$t('m.label.purchaseCost')+':'"
                >
                    <el-input-number
                        v-model="formData.productSupplierProductionCosts"
                        controls-position="right"
                        size="mini"
                    ></el-input-number>
                </el-form-item>
                <el-form-item prop="productSupplierMoq" :label="$t('m.label.MOQ')+':'">
                    <el-input v-model="formData.productSupplierMoq" size="mini"></el-input>
                </el-form-item>
                <el-form-item
                    prop="productSupplierCapactity"
                    :label="$t('m.label.productionCapacity')+':'"
                >
                    <el-input v-model="formData.productSupplierCapactity" size="mini"></el-input>
                </el-form-item>
                <el-form-item
                    prop="productSupplierTransactionCurrency"
                    :label="$t('m.label.transactionCurrency')+':'"
                    size="mini"
                >
                    <el-select
                        v-model="formData.productSupplierTransactionCurrency"
                        :placeholder="$t('m.placeholder.selectTransactionCurrency')" filterable
                    >
                        <el-option label="RMB" value="RMB"></el-option>
                        <el-option label="JPY" value="JPY"></el-option>
                        <el-option label="EUR" value="JPY"></el-option>
                        <el-option label="GBP" value="GBP"></el-option>
                        <el-option label="USD" value="USD"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    prop="productSupplierMinimumCartonQuantity"
                    :label="$t('m.label.minimumPackage')+':'"
                >
                    <el-input v-model="formData.productSupplierMinimumCartonQuantity" size="mini"></el-input>
                </el-form-item>
                <el-form-item prop="userId" :label="$t('m.label.purchasingPersonInCharge')+':'">
                    <el-select
                        v-model="formData.userId"
                        :placeholder="$t('m.placeholder.selectPurchasingPersonInCharge')"
                        size="mini" filterable
                    >
                        <el-option
                            v-for="item in userSelect"
                            :key="item.userId"
                            :label="item.loginName"
                            :value="item.userId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="remark" :label="$t('m.label.remarks')+':'" style="margin-top: 20px;">
                    <el-input
                        v-model="formData.remark"
                        type="textarea"
                        size="small"
                        :autosize="{ minRows: 2, maxRows: 4}"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    @click="onSubmit('form')"
                    size="small"
                    :disabled="loadingSubmit"
                    :icon="loadingSubmit?'el-icon-loading':'el-icon-circle-plus-outline'"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

  <script>
import scrollTable from "components/scroll/scroll-table.vue";
import { formatDate } from "assets/js/date";
const ERR_OK = 200;
export default {
    props: {
        basicInfo: Object
    },
    data() {
        return {
            tableData: [],
            loading: true,
            dialogFormVisible: false,
            formData: {
                productSupplierRecordUser: "当前用户",
                productId: this.basicInfo.productId,
                productSupplierAddress: "",
                productSupplierCapactity: "",
                productSupplierContact: "",
                productSupplierContactMail: "",
                productSupplierContactPhone: "",
                productSupplierId: 0,
                productSupplierMinimumCartonQuantity: "",
                productSupplierMoq: "",
                productSupplierName: "",
                productSupplierProductionCosts: 0,
                productSupplierTransactionCurrency: "",
                remark: "",
                userId: ""
            },
            dialogTitle: "",
            userSelect: [],
            loadingSubmit: false,
            rules: {
                productSupplierName: [
                    {
                        required: true,
                        message: "请输入供应商",
                        trigger: "blur"
                    }
                ],
                productSupplierContact: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur"
                    }
                ],
                productSupplierContactPhone: [
                    {
                        required: true,
                        message: "请输入联系电话",
                        trigger: "blur"
                    }
                ],
                userId: [
                    {
                        required: true,
                        message: "请选择采购负责人:",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    filters: {
        formatDate(date) {
            let dates = new Date(date);
            return formatDate(dates, "yyyy-MM-dd");
        }
    },
    created() {
        this.getData();
        this.getUser();
    },
    methods: {
        getData() {
            this.loading = true;
            this.$ajax
                .post(
                    this.GLOBAL.productService +
                        "/productSupplier/findProductSupplier/" +
                        this.basicInfo.productId
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.tableData = res.data.data;
                    }
                    this.$refs.scrollTable.scrollShow(this.$refs.table);
                    this.loading = false;
                });
        },
        getUser() {
            this.$ajax
               // .get(this.GLOBAL.loginService + "/getDepartmentUser/1/1")
                .get("/system/user/getDeptUserList")
                .then(res => {
                    if (res.data.code === ERR_OK) {
                      console.log("res ")
                      console.log(res.data.rows)
                        this.userSelect = res.data.rows;
                    }
                });
        },
        editShow(item) {
            if (item) {
                this.formData = JSON.parse(JSON.stringify(item));
                this.dialogTitle = "编辑供应商";
            } else {
                this.dialogTitle = "新增供应商";
            }
            this.dialogFormVisible = true;
        },
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.dialogTitle === "新增供应商") {
                        this.addSupplier();
                    } else {
                        this.editSupplier();
                    }
                } else {
                    return false;
                }
            });
        },
        addSupplier() {
            this.loadingSubmit = true;
            this.$ajax({
                method: "post",
                url: this.GLOBAL.productService + "/productSupplier/add",
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.getData();
                    this.$message.success("新增供应商信息成功");
                    this.dialogFormVisible = false;
                    this.$refs["form"].resetFields();
                } else {
                    this.$message.error(res.data.msg);
                }
                this.loadingSubmit = false;
            });
        },
        editSupplier() {
            this.loadingSubmit = true;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.productService +
                    "/productSupplier/update/" +
                    this.formData.productSupplierId,
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.getData();
                    this.$message.success("编辑供应商信息成功");
                    this.dialogFormVisible = false;
                    this.$refs["form"].resetFields();
                } else {
                    this.$message.error(res.data.msg);
                }
                this.loadingSubmit = false;
            });
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        scrollTable
    }
};
</script>
<style lang="stylus" scoped>
.el-table {
    margin-top: 10px;
}

.el-form-item {
    margin-bottom: 10px;
    margin-right: 20px;
}

.el-select {
    width: 100%;
}
</style>
